<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06_显示模式-类型转换</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                border: 1px solid black;

                /* 块级元素--》行内元素 
                   实际的企业级开发中很少将块级元素转换为行内元素 原因是因为失去宽高
                */
                /* display: inline; */
                display: inline-block;
            }


            span {
                border: 1px solid black;
                width: 100px;
                height: 100px;

                /* display: block; */
                display: inline-block;
            }

            img {
                width: 200px;
                height: 200px;

                display: block;
                display: inline;
            }
        </style>
    </head>
    <body>
        <!-- (1) block 块元素 -->
        <div>1</div>
        <div>2</div>

        <!-- (2) inline 行内元素 -->
        <span>3</span>
        <span>4</span>

        <!-- (3) inline-block 行内块-->
        <img src="./img/mzq.jpg" alt="">
        <img src="./img/mzq.jpg" alt="">
    </body>
</html>